<template>
	<div class="wrap">
  <div class="lk-ngt">
    <div class="lk-ngt-left">
      <a href="#/qbfl">全部分类</a>
      <ul class="lk-ngt-hidden">
        <li><img src="../assets/cm.png" />
          <a href="">新鲜水果</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/qz.png" />
          <a href="">蔬菜净菜</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/jt.png" />
          <a href="">肉类家禽</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/fish.png" />
          <a href="">海鲜水产</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/fs.png" />
          <a href="">粮油副食</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/you.png" />
          <a href="">零食酒水</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/jd.png" />
          <a href="">蛋奶素食</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
        <li><img src="../assets/dg.png" />
          <a href="">全球代购</a>
          <ul class="lk-ngt-hidden-child">
            <li><router-link to="">奶粉辅食</router-link></li>
            <li><router-link to="">幼婴用品</router-link></li>
            <li><router-link to="">日用化品</router-link></li>
            <li><router-link to="">保健品</router-link></li>
          </ul>
        </li>
      </ul>
    </div>
    <ul class="lk-ngt-right">
      <li class="lk-ngt-li">
        <router-link to='/'>首页</router-link>
      </li>
      <li>
        <router-link to='/tc'>同城</router-link>
      </li>
      <li>
        <router-link to='/lbw'>礼拜五</router-link>
      </li>
      <li>
        <router-link to='/jfsc'>积分商城</router-link>
      </li>
    </ul>
      </div>
    <i></i>
  </div>
</template>

<script>
	import Qbfl from '@/components/qbfl'
  export default {
    name: "navigation",
    mounted() {

    },
    components:{
    	   Qbfl
    }
  }
  $(function() {
    $(".lk-ngt-right>li").click(function() {
      $(".lk-ngt-right>li").removeClass("lk-ngt-li");

      $(this).addClass("lk-ngt-li");
    })
  })
</script>

<style scoped>
	.wrap{
		height: 50px;
	}
  .lk-ngt {
    width: 1280px;
    height: 50px;
    margin: 20px auto 0;
    position: relative;
    bottom: 0;
  }
 i{
	width: 100%;
	display: inline-block;
	border-top: 1px solid gainsboro;
	position: relative;
	top: -15px;
	
}
  .lk-ngt-left {
    float: left;
    width: 170px;
    background-image: url(../assets/xia1.png);
    background-position: 130px center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
  }
  .lk-ngt-left:hover>ul{
    display: block;
  }
  .lk-ngt-hidden:hover{
    display: block;
  }.lk-ngt-hidden>li:hover{
     background-color: rgb(242,248,232);

   }
  .lk-ngt-hidden>li:hover>ul{
    display: block;
  }
  .lk-ngt-hidden-child>li:hover{
    background-color: rgb(242,248,232);
  }
  .lk-ngt-hidden {
    height: 501px;
    position: absolute;
    z-index: 999999;
    background-color: #fff;
    width: 170px;
    display: none;
  }

  .lk-ngt-hidden>li {
    background: #fff;
    padding-left: 30px;
    border: solid 1px #EFEEEC;
    line-height: 55px;

  }

  .lk-ngt-hidden>li>img {
    vertical-align: middle;
    margin-right: 10px;
    width: 26px;
    height: 24px;
  }
  .lk-ngt-hidden-child{
    position: absolute;
    width: 600px;
    display: none;
    height: 500px;
    top: 0;
    left: 170px;
    background-color: #F4F9EC;
  }
  .lk-ngt-hidden-child>li{
    background: #fff;
    padding-left: 30px;
    border: solid 1px #EFEEEC;
    line-height: 55px;
  }
  .lk-ngt-hidden-child>li>a{
    color: green;
    font-weight: 500;
    font-size: 16px;
  }
  .lk-ngt-left>a {
    /*width: 100%;
        height: 100%;*/
    display: inline-block;
    padding-left: 40px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
  }

  .lk-ngt-right {
    float: left;
    margin: 0;
    overflow: hidden;
  }

  .lk-ngt-right>li {
    float: left;
    cursor: pointer;
  }

  .lk-ngt-li {
    border-left: solid 1px #F08200;
    background-color: rgb(234, 110, 9);
    color: #fff;
  }

  .lk-ngt-right>li>a {
    border-left: solid 1px #F08200;
    padding: 0 60px;
    line-height: 50px;
    border-left: solid 1px #E8E8E8;
    font-size: 18px;
    font-weight: 600;
  }

  .lk-ngt-right>li:hover {
    color: white;
    background-color: rgb(234, 110, 9);
  }

  .lk-ngt-right>li>a:hover {
    color: white;
  }
</style>
